<template>
  <div class="app-container">
    <el-form ref="elForm" :model="formData" size="small" label-width="100px" :inline="true">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="地址" prop="loc">
        <el-input v-model="formData.loc" placeholder="请输入地址" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="礼金数额" prop="money">
        <el-input v-model="formData.money" placeholder="请输入礼金数额" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入电话" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="日期范围" prop="date">
        <el-date-picker type="daterange" v-model="formData.date" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"  start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        range-separator="至" clearable></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

    <el-divider></el-divider>
    <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>

    <el-table
        v-loading="loading"
        :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
        style="width: 100%;"
    >
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="地址" align="center" prop="address" :show-overflow-tooltip="true" />
      <el-table-column label="电话" align="center" prop="phone" />
      <el-table-column label="日期" align="center" prop="giftDate" :show-overflow-tooltip="true" />
      <el-table-column label="礼金" align="center" prop="giftAmount" :show-overflow-tooltip="true" />
      <el-table-column label="礼金记录图片" align="center" prop="giftAmountImage" />
      <el-table-column label="礼金记录图片" align="center" prop="giftAmountImage" >
        <template slot-scope="{row}">
          <el-image
              v-if="row.giftAmountImage"
              style="width: 50px; height: 50px"
              :src="row.giftAmountImage"
              :preview-src-list="[row.giftAmountImage]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="礼物" align="center" prop="giftItem" />
      <el-table-column label="礼物图片" align="center" prop="os" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleForceLogout(scope.row)"
              v-hasPermi="['monitor:online:forceLogout']"
          >强退</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />

    <div>
      <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="新增礼金" :visible.sync="dialogFormVisible">
        <el-form ref="addForm" :model="addFormData" :rules="addRules" size="small" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="addFormData.name" placeholder="请输入姓名" clearable prefix-icon='el-icon-user'
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="addFormData.address" placeholder="请输入地址" clearable
                      prefix-icon='el-icon-location' :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addFormData.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit
                      clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="日期选择" prop="giftDate">
            <el-date-picker v-model="addFormData.giftDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择日期" clearable></el-date-picker>
          </el-form-item>
          <el-form-item label="礼金" prop="giftAmount">
            <el-input v-model="addFormData.giftAmount" placeholder="请输入礼金" clearable prefix-icon='el-icon-money'
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="上传" prop="field105">
            <el-upload ref="field105" :file-list="field105fileList" :action="field105Action"
                       :before-upload="field105BeforeUpload" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="礼物" prop="giftItem">
            <el-input v-model="addFormData.giftItem" placeholder="请输入礼物" clearable prefix-icon='el-icon-present'
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item label="上传" prop="field106">
            <el-upload ref="field106" :file-list="field106fileList" :action="field106Action"
                       :before-upload="field106BeforeUpload" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>
import {insert, list} from '@/api/gift/money'

export default {
  name: "Money",
  components: {},
  props: [],
  data() {
    return {

      dialogFormVisible: false,
      addFormData: {
        name: undefined,
        address: undefined,
        phone: '',
        giftDate: null,
        giftAmount: undefined,
        field105: null,
        giftItem: undefined,
        field106: null,
      },
      addRules: {
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '请输入手机号',
          trigger: 'blur'
        }, {
          pattern: /^1(3|4|5|7|8|9)\d{9}$/,
          message: '手机号格式错误',
          trigger: 'blur'
        }],
        giftDate: [{
          required: true,
          message: '请选择日期',
          trigger: 'change'
        }],
        giftAmount: [{
          required: true,
          message: '请输入礼金',
          trigger: 'blur'
        }],
        giftItem: [],
      },
      field105Action: 'https://jsonplaceholder.typicode.com/posts/',
      field105fileList: [],
      field106Action: 'https://jsonplaceholder.typicode.com/posts/',
      field106fileList: [],

      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      pageNum: 1,
      pageSize: 10,

      formData: {
        name: undefined,
        loc: undefined,
        money: undefined,
        phone: undefined,
        date: null,
      },
    }
  },
  computed: {


  },
  watch: {},
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {

    // Base64 编码方法
    base64Encode(str) {
      if (!str) return '';
      return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
      }));
    },



    onOpen() {},
    onClose() {
      this.$refs['addForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
      this.dialogFormVisible = false
    },
    handleConfirm() {
      this.$refs['addForm'].validate(valid => {
        if (!valid) return

        insert(this.addFormData).then(res => {
          this.$message.success('添加成功')
          this.getList()
        })

        this.close()
      })
    },
    field105BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      let isAccept = new RegExp('image/*').test(file.type)
      if (!isAccept) {
        this.$message.error('应该选择image/*类型的文件')
      }
      return isRightSize && isAccept
    },
    field106BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
//路牌档案库系统

    /** 查询列表 */
    getList() {
      this.loading = true
      list({name:''}).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>


<style scoped>

</style>
